<template>
  <div>App</div>
  <p>count:{{ count }}</p>
  <p>doubleCount:{{ doubleCount }}</p>
  <p>fullName:{{ fullName }}</p>
  <p>firstName:{{ firstName }}</p>
  <p>lastName:{{ lastName }}</p>
  <button @click="changeCount">changeCount</button>
  <button @click="changeName">changeName</button>
  <Header />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
  import { ref,computed } from 'vue';
  import Header from './components/Header.vue';

  const count = ref(1);
  const doubleCount = computed(() => {
    return count.value * 2
  })
  const changeCount = () => {
    count.value++
  }

  const firstName = ref("zhang");
  const lastName = ref("sanfeng");
  const changeName = () => {
    fullName.value = "li yifeng" 
  }
  const fullName = computed({
    get() {
      return firstName.value + " " + lastName.value;
    },
    set(newVal) {
      const [first,last] = newVal.split(" ");
      firstName.value = first;
      lastName.value = last;
    }
  })
</script>

<style  scoped lang="scss">
  
</style>